<template>
  <div>
    <div class="q-mb-sm size-14">访问链接：</div>
    <div class="q-pl-md row items-center border-1">
      <q-input class="col" hide-underline :value="shareUrl"/>
      <q-btn color="primary" label="复制" class="no-border-radius"  @click="copy"/>
    </div>
    <div class="q-mt-md row items-center">
      <qrcode class="q-mr-sm" :value="url" :options="{ size: 100 }"></qrcode>
      <div class="size-14">手机扫一扫,分享给好友</div>
    </div>
  </div>
</template>

<script>
    // import VueQrcode from '@xkeshi/vue-qrcode'
    // import Vue from 'vue'
    //
    // Vue.component(VueQrcode.name, VueQrcode)

    export default {
      name: 'aShareDialog',
      components: {
        qrcode: function (resolve) {
          require(['@xkeshi/vue-qrcode'], resolve)
        }
      },
      props: {
        title: {
          type: String,
          required: true
        },
        link: {
          type: String,
          required: false
        }
      },
      data () {
        return {
        }
      },
      computed: {
        url () {
          return this.link || this.$route.path
        },
        shareUrl () {
          const title = this.title
          const url = this.url

          return `${title} - 发现中国 - ${url}`
        }
      },
      watch: {
      },
      methods: {
        copy () {
          const copy = require('copy-text-to-clipboard')
          copy(this.shareUrl)
        }
      }
    }
</script>

<style lang="stylus">
</style>
